<template>
  <div class="home">
    <div class="homeLeft f1" v-if="articleType == false">
      <div class="carousel">
        <el-carousel height="250px">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="article">
        <ul>
          <li
            v-for="(item, index) in articleList"
            :key="index"
            :class="index == 0 ? 'article_list1' : 'article_list2'"
          >
            <img
              :src="item.cover_img"
              alt=""
              class="detail_page"
              title="进入详情页"
              @click="detailPage(item)"
            />
            <div class="text">
              <h4
                class="detail_page"
                title="进入详情页"
                @click="detailPage(item)"
              >
                {{ item.name }}
              </h4>
              <p>{{ item.pub_date }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="homeLeft2 f1" v-if="articleType == true">
      <div @click="goHome" class="top">
        <i class="el-icon-s-home">&nbsp;&nbsp;返回首页</i>
      </div>
      <Article :articleData="articleData" @goHome="goHome" />
    </div>
    <HomeRigth />
  </div>
</template>

<script>
import Api from "../../../api/api";
import request from "../../../api/request";
import Article from "@common/front/article";
import HomeRigth from "@common/front/homeRight";
import { formatDate } from "@/common/publicmethods/publicmethods";
export default {
  components: {
    Article,
    HomeRigth,
  },
  data() {
    return {
      articleList: null, //文章列表
      articleData: {name:'返回文章列表',data:null}, //单击所选文章的对象
      articleType: false, //文章页是否跳转
    };
  },
  mounted() {
    this.getArticleData();
  },
  methods: {
    //获取文章
    getArticleData() {
      let params = {
        method: "GET",
        url: Api.apiArticle,
      };
      request(params)
        .then((result) => {
          if (result.status == 3) {
            this.$message.error("用户登录失效");
            this.$router.push({ name: "bolgHome" });
          } else if (result.status == 0) {
            this.articleList = result.data;
            this.articleList.forEach((item) => {
              item.content = item.content.replaceAll(
                "<pre>",
                '<pre><div class="copy_but" title="复制" style="color: #999;"><i class="el-icon-tickets"></i></div>'
              );
              item.cover_img = Api.API_HEADER + "/" + item.cover_img;
              item.pub_date = formatDate(item.pub_date, "yyyy 年 MM 月 dd 日");
            });
          }
        })
        .catch((err) => {});
    },
    // 打开详情页
    detailPage(obj) {
      this.articleData.data = obj;
      this.articleType = true;
    },
    // 退出首页
    goHome() {
      this.articleType = false;
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  margin-top: 50px;
  padding: 0 10%;
      display: flex;
    justify-content: space-evenly;
}
.homeLeft {
  width: calc(100% - 580px);
  // background-color: #fff;
  padding: 20px 60px;
  ul {
    margin: 20px 0;
    li {
      height: 120px;
      padding: 10px;
      display: flex;
      align-items: center;
      img {
        width: 200px;
        height: 100px;
      }
      .text {
        height: 120px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        p {
          color: #666;
        }
      }
    }
    .article_list2 {
      border-top: 1px solid #999;
    }
  }
  .article {
    .detail_page:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}
.homeLeft2 {
  width: calc(100% - 580px);
  // background-color: #fff;
  padding: 20px 60px;
  .top {
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
  }
  i {
    font-size: 18px;
  }
  i:hover {
    cursor: pointer;
    // text-decoration: underline;
  }
}
.f1 {
  background-color: #fff;
  border: 2px dashed #999;
  border-radius: 8px;
  margin-bottom: 30px;
}
.homeRight {
  float: right;
  width: 300px;
  .mp3{
    margin-left: -10px;
  }
  .mymessage {
    p {
      font-size: 20px;
      display: flex;
      align-items: center;
      padding: 10px 5px;
      height: 30px;
      border-bottom: 1px solid #eee;
      i {
        margin-top: 2px;
        font-size: 20px;
      }
      
    }
    ul{
      padding: 20px 15px;
      li {
        margin-bottom: 5px;
        line-height: 25px;
        font-size: 15px;
        color: #333;
      }
      }
      div{
        background-color: #efefef;
        // background: linear-gradient(to top, #f1c360 0%, #d4ba8a 50%, #f5e342 100%);
      }
  }
  .wechat {
    p {
      font-size: 20px;
      display: flex;
      align-items: center;
      padding: 10px 5px;
      height: 30px;
      border-bottom: 1px solid #eee;
      i {
        margin-top: 2px;
        font-size: 20px;
      }
    }
    img {
      width: 280px;
      height: 350px;
    }
  }
}
.carousel {
  /* margin: 20px; */
  border: 1px solid;
}
</style>